<!-- 最近加速流量排名 -->
<template>
  <div class="wrap">
    <span class="title">事件严重性等级分布图
     <el-select  size="small" v-model="titles" style="width:130px;margin-left:10px" placeholder="请选择">
        <el-option :value="1" label="严重性"/>
        <el-option :value="2" label="终端"/>
      </el-select>
    </span>
    <div ref="linechart" id="chart1" :style="{ height: height, width: width }"/>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-liquidfill'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
import { connrequest } from "@/api/firstPage";
import { getNowDay } from "@/utils/index.js";
export default {
  mixins: [resize],
  props:{
    title:{
      type:String
    },
    list:{
      type:Object
    },
    dataList:{
      type:Array
    }
  },
  data() {
    return {
      width: "100%",
      height: "350px",
      chart: null,
      titles:1
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    // this.getData();
    // console.log(this.list,1111111111111);
  },
  watch:{
    list: {
      deep: true,
      handler(val) {
        console.log(val);
        this.$nextTick(() => {
          this.initChart()
        })
      }
    },
    dataList:{
      handler() {
        // console.log(val);
        this.$nextTick(() => {
          this.initChart()
        })
      }
    }
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(this.list);

    this.$nextTick(()=>{
      this.initChart();
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      console.log(this.dataList);
      this.chart = echarts.init(this.$refs.linechart, 'macarons')
      this.setOptions(this.dataList);
    },
    // async getData() {
    //   let NowDay = getNowDay("time");
    //   const data = {
    //     Filter: {
    //       StartTime: NowDay,
    //       EndTime: "",
    //       SumCount: 9
    //     }
    //   };
    //   const res = await connrequest('GetShadowStreamSum', data);
    //   if (res.Data) {
    //     this.$nextTick(()=>{
    //       res.Data.map((item) => {
    //         // item.Count = item.Count.toLocaleString()
    //         // item.Count = item.Count > 1000 ? (item.Count / 1000 / 1000).toFixed(2) + "M" : item.Count / 1000 + "KB";
    //         item.value = item.Count
    //         item.name = item.Name
    //         return item;
    //       });
    //       this.dataList = res.Data;
    //       this.setOptions(this.dataList)
    //     })
    //   }
    //   else{
    //     this.$nextTick(()=>{
    //       const dom = document.getElementById('chart1');
    //       dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
    //       dom.removeAttribute('_echarts_instance_');
    //     })
    //   }
    // },
    setOptions(dataList) {
      // let value = 0;
      // // console.log(list);
      let data = []
      // value =(list.useVal/list.allVal)*100
      dataList.map(item=>{
        data.push({
          name:item.Dir,
          value:item.Size
        })
      })
      // let title = '%';
      // let int = value.toFixed(2).split('.')[0];
      // let float = value.toFixed(2).split('.')[1];
      const backgroundColor = '';
      const title = {
        text: '网络/安全设备',
        textStyle: {
          color: '#fff',
          fontSize: 16
        },
        padding: 0,
        top: 35,
        left: 'center'
      };
      const legend = {
        //data，就是取得每个series里面的name属性。2324
        // top: 'bottom',
        orient: 'horizontal',
        icon: 'circle', //图例形状
        padding: 0,
        bottom: 20,
        // right: '0',
        left:'center',
        itemWidth: 12, //小圆点宽度
        itemHeight: 12, // 小圆点高度
        itemGap: 5, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
        textStyle: {
          fontSize: 12,
          color: 'black'
        }
      };
      const tooltip = {
        show: true,
        formatter: '{b}:{d}%'
      };
      const color = [];
      this.chart.setOption({
        backgroundColor,
        color,
        title,
        tooltip,
        legend,
        series: [
          {
            name: '文件同步磁盘使用',
            type: 'pie',
            center: ['50%', '45%'], //圆心的位置
            top: '1%', //单单指的饼图距离上面的距离，top越大饼图越小
            left: '0%', //单单指的饼图距离左面的距离，会改变饼图的大小
            radius: ['0%', '40%'], //实心圆[内半径=0，外半径] 外半径越大，圆越大
            clockwise: true, //顺时针排列
            startAngle: 50, //起始角度 影响不大
            //roseType:"", // 实心圆 不能出现roseType这个属性
            label: {
              show: true, //false不显示饼图上的标签
              position: 'outside', //inside（在饼图上显示）,outside(默认就会出现引导线) center
              formatter: '{b}：{d}%'
            },
            //只有设置了label:show=ture;position=outside 设置labelLine才会有效
            labelLine: {
              show: true, //显示引导线
              length: 30, //连接饼图第1段线条的长度 length length2 不写自适应
              length2: 30, //链接饼图第2段线条长度
              smooth: false //是否光滑连接线
            },
            itemStyle: {
              //每个扇形的设置
              borderColor: 'rgba(0,0,0,.1)', //扇形边框颜色
              borderWidth: 1 //扇形边框大小 要先给borderColor颜色 设置borderWidth才会有效果

            },
            data: data.sort((a, b) => b.value - a.value), //数组从大到小排序

            emphasis: {
              //启用鼠标放上去放大效果，这个挺好的
              scale: true,
              scaleSize: 10,
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    }
  }
};
</script>
<style scoped lang='scss'>
.wrap {
  height: 370px;
  overflow: hidden;
}
</style>
